import React from 'react';
import { connect } from 'dva';
import moment from 'moment';
// import _ from 'lodash';
import { Table } from 'antd';
import common from '../common.less';
import QueryBar from '../../../components/searchBar';

function Cards({ data, pagination, vip = {}, dispatch }) {
    const columns = [
        {
            title: '订单号',
            dataIndex: 'order_id',
            key: 'order_id',
        },
        {
            title: ' 交易时间',
            dataIndex: 'create_time',
            key: 'create_time',
            render: t => moment(t).format('YYYY-MM-DD HH:mm:ss')
        },
        {
            title: '充值金额(元)',
            dataIndex: 'recharge_price',
            key: 'recharge_price',
        },
        {
            title: '赠值(元)',
            dataIndex: 'sendMoney',
            key: 'sendMoney',
        },
    ];
    const reSearch = (query) => {
        dispatch({
            type: 'card/reSearch',
            query,
        });
    };
    const { storeName, userName, total, balance } = vip;
    const onChange = (page, pageSize) => {
        dispatch({
            type: 'card/load',
            payload: { page, pageSize },
        });
    };
    return (
        <div className={common.normalWrap}>
            <div className={common.search}>
                <QueryBar
                    config={[
                        'timeRange',
                    ]}
                    initFd={{ payType: '' }}
                    onSubmit={reSearch}
                />
            </div>
            <h3 className={common.cardInfo}>
                <span>{storeName}</span>的玩家<b>{userName}</b>:
                累计充值 <i>{total}</i>元,
                当前余额 <i>{balance}</i>元。
            </h3>
            <div className={common.table}>
                <Table
                    rowKey="id"
                    columns={columns}
                    dataSource={data}
                    pagination={{ ...pagination, onChange }}
                />
            </div>
        </div>
    );
}

function mapStateToProps({ card }) {
    return { ...card };
}

export default connect(mapStateToProps)(Cards);
